<template>
<div class="vue-container">
  <div id="nav">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="3d-show">3D</el-menu-item>
      <el-menu-item index="builder" >Builder.io</el-menu-item>
      <el-menu-item index="builder2" >Builder.io</el-menu-item>
      <el-menu-item index="builder3" >Builder.io</el-menu-item>
      <el-menu-item index="3" >消息中心</el-menu-item>
    </el-menu>
  </div>
  <router-view></router-view>
  <div class="footer">
    <el-select
              v-model="langValue"
              @change="changeLang"
              placeholder="English"
            >
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
  </div>
</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
import { useRoute, useRouter } from "vue-router";
import { supportedLanguages } from '../constants/l10n';
export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      activeIndex: "1",
      langOptions: supportedLanguages,
      langValue:"en",
    };
  },
  methods: {
    handleSelect(key: any, keyPath: any) {
      this.$router.push(key);
    },
    changeLang(e:any){
        localStorage.setItem("LANGUAGE",e);
    },
  },
});
</script>

<style lang="scss" scoped>


#app {
  margin: 0 0 0 0;
  width: 100%;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  .nav{
    margin-left: 3%;
    margin-right: 3%;
  }
  .footer {
  background-color: #343434;
  color: #BDD3DA;
  width:100%;
  display: flex;
  justify-content: center;
  justify-items: center;
}
}
</style>
